<!DOC50TYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="styles/simditor.css" />
		<script src="jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="scripts/module.min.js"></script>
		<script type="text/javascript" src="scripts/hotkeys.min.js"></script>
		<script type="text/javascript" src="scripts/uploader.min.js"></script>
		<script type="text/javascript" src="scripts/simditor.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.y_content {
				width: 1100px;
				margin: 20px auto 0;
			}
			
			.y_head {
				width: 100%;
				background-color: #EFEFEF;
			}
			
			.y_header {
				width: 1100px;
				margin: auto;
				padding: 10px 0 10px;
			}
			
			.y_cont_logo {
				width: 200px;
				height: 70px;
				float: left;
				margin-left: 20px;
			}
			
			.y_cont_logo img {
				width: 200px;
				height: 70px;
			}
			
			.y_login_user {
				width: 100px;
				float: right;
				margin-right: 20px;
				position: relative;
			}
			
			.y_login_user img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				padding: 10px;
				display: block;
				margin: auto;
			}
			
			.y_user_detail {
				width: 200px;
				background: #FFF;
				border: solid 1px #CCCCCC;
				position: absolute;
				left: -40px;
				top: 80px;
				display: none;
				z-index: 1;
			}
			.y_user_detail p,
			.y_user_detail li {
				font-size: 16px;
				line-height: 46px;
				text-align: center;
			}
			.y_user_detail p a,
			.y_user_detail li a {
				text-decoration: none;
				color: #000;
			}
			
			.y_preson_mess {
				width: 300px;
				min-height: 500px;
				float: left;
				border: solid 1px #CCCCCC;
				padding: 50px 0;
				background: #EFEFEF;
			}
			
			.y_preson_img {
				width: 120px;
				height: 120px;
				margin: auto;
				position: relative;
			}
			
			.y_preson_img img {
				width: 120px;
				height: 120px;
				border-radius: 50%;
			}
			
			.preson_mession {
				width: 280px;
				margin: 50px auto 0;
			}
			
			.preson_mession .form-group {
				font-size: 16px;
				margin: 20px 0;
				padding-left: 50px;
			}
			
			.preson_mession .form-group input {
				width: 180px;
				height: 25px;
			}
			
			.preson_btn {
				width: 200px;
				margin: 70px auto 0;
			}
			
			.preson_btn button {
				width: 80px;
				height: 30px;
				margin-left: 15px;
				border: none;
				outline: none;
				border-radius: 5px;
			}
			
			.preson_btn button:nth-child(1) {
				background: #008CFF;
				color: #FFF;
			}
			
			#y_preson_found {
				width: 780px;
				float: left;
				margin-left: 8px;
			}
			
			.y_preson_text {
				width: 180px;
				float: left;
				margin-left: 13px;
				margin-bottom: 10px;
				position: relative;
			}
			
			.y_preson_text span {
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				background: #ce2f2b;
				color: #FFF;
				position: absolute;
				right: -10px;
				top: -10px;
				text-align: center;
				font-size: 20px;
				display: none;
				cursor: pointer;
				-webkit-user-select: none
			}
			
			.y_preson_pic img {
				width: 180px;
				height: 250px;
			}
			
			.y_preson_pic p {
				font-size: 16px;
				text-align: center;
				line-height: 40px;
			}
			
			.y_preson_relese {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background: #008CFF;
				border: none;
				outline: none;
				margin: 10px 0;
				margin-left: 50px;
				display: block;
				border-radius: 4px;
				/*display: none;*/
				cursor: pointer;
			}
			
			.y_preson_relese a {
				color: #FFF;
				text-decoration: none;
			}
			
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
				padding-top: 130px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
			
			.cont {
				min-height: 700px;
			}
			
			#files {
				position: absolute;
				left: 0;
				top: 0;
			}
			
			#preson_img {
				width: 120px;
				height: 120px;
				border-radius: 50%;
				line-height: 120px;
				opacity: 0;
			}
			
			.preson_btn button:nth-child(3) {
				width: 200px;
				height: 30px;
				margin-left: 0;
				margin-top: 100px;
				background: #008CFF;
				color: #FFF;
			}
			
			#yulan {
				width: 50px;
				height: 80px;
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								<a href="">用户名</a>
							</li>
							<li>
								<a href="">我的书架</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								个人中心
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_content clearfix">
				<div class="y_preson_mess">
					<div class="y_preson_img">
						<img src="" id="y_show_img" />
						<div class="form-group" id="files">
							<input type="file" class="form-control" id="preson_img" title="更换头像">
						</div>
					</div>
					<div class="preson_mession">
						<div class="form-group">
							<label for="pass">昵称：</label>
							<input type="text" class="form-control" id="preson_name">
						</div>
					</div>
					<div class="preson_btn">
						<button id="y_save">保存修改</button>
						<button id="y_cancel">取消修改</button>
						<button id="y_write_novel" data-toggle="modal" data-target="#myModal">写小说</button>
					</div>
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title">Modal title</h4>
								</div>
								<div class="modal-body">
									<div class="form-group">
										<img src="" alt="" id="yulan" />
										<label for="user">小说封面</label>
										<input type="file" class="form-control" id="novel_image">
									</div>
									<div class="form-group">
										<label for="user">小说名字</label>
										<input type="text" class="form-control" id="user" placeholder="小说名字">
									</div>
									<div class="form-group">
										<label for="user">小说简介</label>
										<input type="text" class="form-control" id="novel_jianj">
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary" id="novel_lu_btn">录入</button>
								</div>
							</div>
						</div>
					</div>
					<div class="modal fade" id="myNovel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title">Modal title</h4>
								</div>
								<div class="modal-body">
									<div class="form-group">
										<label for="user">小说章节</label>
										<input type="text" class="form-control" id="novel_list">
									</div>
									<div>
										<label for="text">内容</label>
										<textarea id="editor" placeholder="Balabala" autofocus></textarea>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary" id="novel_list_btn">录入</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="y_preson_found">
				</div>
			</div>
			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		var href = 'http://localhost:8000'
		//富文本
		var editor = new Simditor({
			textarea: $('#editor')
		});
		//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
		//登陆注册
		$('.y_login_user').on('mouseover', function() {
			$('.y_user_detail').show()
		})
		$('.y_login_user').on('mouseout', function() {
			$('.y_user_detail').hide()
		})
		//头像显示
		$('.y_login_user img').attr('src', localStorage.img)
		$('.y_login_user li').eq(0).html(localStorage.name)
		$('#y_show_img').attr('src', localStorage.img)
		$('#preson_name').val(localStorage.name)

		//删除
		$('#y_preson_found').on('mouseover', '.y_preson_text', function() {
			$(this).children('span').show()
		})
		$('#y_preson_found').on('mouseout', '.y_preson_text', function() {
			$(this).children('span').hide()
		})
		var img_url = ''
		//上传头像
		preson_img.onchange = function() {
			var f = preson_img.files[0]
			var d = new FormData
			d.append('img', f)
			$.ajax({
				type: "post",
				url: href + "/files/img",
				data: d,
				contentType: false,
				processData: false,
				success(data) {
					console.log(data)
					img_url = href + data
					$('#y_show_img').attr('src', img_url)
				}
			});
		}
		//取消修改
		$('#y_cancel').on('click', function() {
			preson_name.value = localStorage.name
			$('#y_show_img').attr('src', localStorage.img)
		})
		//保存修改
		$('#y_save').on('click', function() {
			if(preson_name.value == '') {
				alert('昵称不能为空')
			} else if(preson_img.value == '') {
				alert('请上传头像')
			} else if(preson_name.value == localStorage.name) {
				alert('新名字不可与旧名字重复')
			} else if(preson_name.value.length >= 10) {
				alert('昵称长度超过10个字符')
			} else {
				$.ajax({
					type: "post",
					url: href + "/users/updata",
					data: {
						loginuid: localStorage.uid,
						img: img_url,
						names: preson_name.value
					},
					success(data) {
						alert(data)
						$.ajax({
							type: "post",
							url: href + "/users/succ",
							data: {
								names: preson_name.value
							},
							success(data) {
								localStorage.user = data[0].user
								localStorage.uid = data[0].uid
								localStorage.img = data[0].img
								localStorage.name = data[0].name
								preson_name.value = ''
								preson_img.value = ''
								$('.y_login_user img').attr('src', localStorage.img)
								$('.y_login_user li').eq(0).html(localStorage.name)
								$('#y_show_img').attr('src', localStorage.img)
								$('#preson_name').val(localStorage.name)
							}
						});
					}
				});
			}
		})
		var novel_img = ''
		//上传小说封面
		novel_image.onchange = function() {
			var f = novel_image.files[0]
			var d = new FormData
			d.append('img', f)
			$.ajax({
				type: "post",
				url: href + "/files/img",
				data: d,
				contentType: false,
				processData: false,
				success(data) {
					console.log(data)
					novel_img = href + data
					$('#yulan').attr('src', novel_img)
				}
			});
		}
		$.ajax({
			type: "post",
			url: href + "/users/kaishi",
			data: {
				loginuid: localStorage.uid
			},
			success(data) {
				console.log(data)
				for(var i = 0; i < data.length; i++) {
					var oDiv = $('<div class="y_preson_text">').attr('data_searchuid', data[i].uid)
					oDiv.append($('<span>×</span>')).append($('<div class="y_preson_pic" data-toggle="modal" data-target="#myNovel">')
						.append($('<img src=""/>').attr('src', data[i].novelimg)).append($('<p></p>').html('《' + data[i].novelname + '》'))
					).append($('<button class="y_preson_relese"><a href="">发布小说</a></button>'))
					$('#y_preson_found').prepend(oDiv)
				}
			}
		});
		//创建小说
		novel_lu_btn.onclick = function() {
			if(user.value == '' || novel_jianj.value == '') {
				alert('小说名和简介内容不能为空')
			} else if(novel_image.value == '') {
				alert('请上传头像')
			} else if(user.value.length >= 10) {
				alert('小说名不能超过10个字符')
			} else if(novel_jianj.value >= 150) {
				alert('小说简介不能超过150个字符')
			} else {
				$.ajax({
					type: "post",
					url: href + "/users/create",
					data: {
						novelname: user.value,
						author: localStorage.name,
						novelimg: novel_img,
						novelsyn: novel_jianj.value,
						loginuid: localStorage.uid
					},
					success(data) {
						alert(data)
						//						$('#myModal').modal('hide')
						$.ajax({
							type: "post",
							url: href + "/users/zhuijia",
							data: {
								novelname: user.value
							},
							success(data) {
								console.log(data)
								var oDiv = $('<div class="y_preson_text">').attr('data_searchuid', data[0].uid)
								oDiv.append($('<span>×</span>')).append($('<div class="y_preson_pic" data-toggle="modal" data-target="#myNovel">')
									.append($('<img src=""/>').attr('src', data[0].novelimg)).append($('<p></p>').html('《' + data[0].novelname + '》'))
								).append($('<button class="y_preson_relese"><a href="">发布小说</a></button>'))
								$('#y_preson_found').prepend(oDiv)
							}
						});
						////						$('#myModal').modal('hide')
						user.value = ''
						novel_jianj.value = ''
						novel_image.value = ''
					}
				});
			}
		}
		//创建章节
		var searchuid = ''
		$('#y_preson_found').on('click', '.y_preson_text', function() {
			searchuid = $(this).attr('data_searchuid')
		})

		novel_list_btn.onclick = function() {
			if(novel_list.value == '' || $('.simditor-body').html() == '') {
				alert('内容不能为空')
			} else if(novel_list.value.length >= 15) {
				alert('章节名字过长不能超过15个')
			} else {
				$.ajax({
					type: "post",
					url: href + "/users/createlist",
					data: {
						booklist: novel_list.value,
						searchuid: searchuid,
						text: $('.simditor-body').html()
					},
					success(data) {
						alert(data)
					}
				});
			}
		}
		//删除小说
		$('#y_preson_found').on('click', 'span', function() {
			searchuid = $(this).parents().attr('data_searchuid')
			var _this=$(this)
			console.log(searchuid)
			$.ajax({
				type: "post",
				url: href + "/users/del",
				data: {
					searchuid: searchuid
				},
				success(data) {
					alert(data)
					$.ajax({
						type: "post",
						url: href + "/users/delete",
						data: {
							searchuid: searchuid
						},success(data){
							console.log(data)
						}
					})
					_this.parent().remove()
				}
			});
		})
		//发布小说
		$('#y_preson_found').on('click', '.y_preson_relese', function() {
			searchuid = $(this).parent().attr('data_searchuid')
			$(this).children('a').attr('href',href+'/books.html?searchuid='+searchuid)
		})
		//我的书架
		$('.y_login_user li').eq(1).on('click', function() {
			$(this).children().attr('href', href + '/books.html')
		}) 
		//退出登录
		$('.y_login_user li').eq(4).on('click', function() {
			$('.y_login_user li').eq(0).html('用户名:')
			$('.y_login_user img').attr('src', 'images/1.png')
			localStorage.clear('user')
			localStorage.clear('uid')
			localStorage.clear('img')
			localStorage.clear('name')
			$(this).children('a').attr('href',href)
		}) 
		//个人收藏
		$('.y_login_user li').eq(2).on('click', function() {
			$(this).children().attr('href', href + '/collect.html')
		}) 
	</script>

</html>